<template>
  <div id="touristLogin">
    <div class="header">
      <div class="title">
        <p>图小助</p>
      </div>
      <div class="btn">
        <div @click="goTo('1')">
          <p>设计师注册登录</p>
          <img :src="btnIcon" alt />
        </div>
        <div @click="goTo('0')">
          <p>表现师登录</p>
          <img :src="btnIcon" alt />
        </div>
      </div>
    </div>

    <div v-if="showMsg">
      <card
        :showMsg="showMsg"
        :cardList="list"
        :minHeight="'2.2rem'"
        :marginBottom="'1.5rem'"
        :clickToLogin="'1'"
      ></card>
    </div>
    <div class="noNetwork" v-else>
      <img class="noPhone" src="../../assets/img/public/nophone.png" alt />
      <p>图小助目前仅服务于深圳</p>
    </div>
    <mainNav :clickToLogin="'1'"></mainNav>
  </div>
</template>

<script>
let vm;
import card from "@/components/designer/homePage/card";
import mainNav from "@/components/login/mainNav";
import { AMAPKEY, asyncLoadAMAP, Getsite } from "@/utils/amap.js";
export default {
  name: "touristLogin",
  components: {
    mainNav,
    card
  },
  data() {
    return {
      list: [],
      longitude: "",
      latitude: "",
      btnIcon: require("../../assets/img/login/TouristLogin.png"),
      showMsg: false
    };
  },
  watch: {
    // center: {
    //   handler(val){
    //     this.getBuser();
    //   },
    //   immediate:true
    // },
    center(val) {
      this.getBuser();
    },
    // list(val) {
    //   console.log(354654641681654653231)
    //   this.list = val;
    //   if (val.length == 0) {
    //     console.log(2222555556669)
    //     this.showMsg = false;
    //   } else {
    //     console.log(69955555555)
    //     this.showMsg = true;
    //   }
    // },
    list: {
      handler(val) {
        this.list = val;
        if (val.length == 0) {
          this.showMsg = false;
        } else {
          this.showMsg = true;
        }
      },
      deep: true
    }
    // latitude(val) {
    //   this.getBuser();
    // },
    // longitude(val) {
    //   this.getBuser();
    // }
  },
  mounted() {
    vm = this;
    this.$nextTick(() => {
      this.getUserLocation();
      // this.$forceUpdate();
    });
  },
  methods: {
    //获取用户所在的定位
    getUserLocation() {
      let _this = this;
      try {
        window.map_callback = async () => {
          let _center;
          console.log(33333333);
          try {
            _center = await Getsite();
            _this.longitude = _center[0];
            _this.latitude = _center[1];
            this.getBuser();
          } catch (error) {
            if (
              this.$route.path == "/designer/homePage" ||
              this.$route.path == "/touristLogin"
            ) {
              this.$dialog
                .alert({
                  message:
                    "获取您的定位信息失败,请打开“定位服务”来允许“图小助”确定您的位置，以下是深圳地区表现师信息"
                })
                .then(() => {
                  // on close
                });
              // _this.$toast("获取您的定位信息失败,以下是深圳地区表现师信息33333333333333");
              // alert("获取您的定位信息失败,以下是深圳地区表现师信息")
              _this.latitude = "22.551235";
              _this.longitude = "113.95483";
              _this.getBuser();
              return;
            }
            // _this.latitude = "22.551235";
            // _this.longitude = "113.95483";
            // _this.getBuser();
            // return;
          }
        };
      } catch (error) {
        console.log(44444444444444);
        _this.latitude = "22.551235";
        _this.longitude = "113.95483";
        _this.getBuser();
      }
      asyncLoadAMAP();
    },
    //获取表现师列表
    async getBuser() {
      try {
        const e = await HTTP("getbuser", {
          latitude: this.latitude,
          longitude: this.longitude,
          userType: 1
        });
        if (e.code === 200) {
          // this.$forceUpdate();
          vm.list = e.data;
          setTimeout(() => {
            vm.list = e.data.map(e => e);
          }, 0);
          if (vm.list.length == 0) {
            vm.showMsg = false;
          } else {
            vm.showMsg = true;
          }
        }
      } catch (error) {
        this.$toast("数据开小差了");
      }
    },
    //跳转登录页面
    goTo(val) {
      switch (val) {
        case "0":
          this.$router.push("/login");
          break;
        case "1":
          this.$router.push("/register");
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#touristLogin {
  .header {
    position: fixed;
    width: 100%;
    z-index: 99;
    .title {
      width: 100%;
      height: 1rem;
      background: #5e8efe;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        font-size: 0.38rem;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .btn {
      display: flex;
      > div:nth-child(n + 1) {
        display: flex;
        width: 50%;
        height: 0.9rem;
        align-items: center;
        justify-content: center;
        border-right: 0.02rem solid #ffffff;
        background: #282828;
        opacity: 0.5;
        &:last-child {
          border-right: 0;
        }
        p {
          font-size: 0.32rem;
          font-weight: 400;
          color: #ffffff;
        }
        img {
          width: 0.14rem;
          height: 0.23rem;
          margin-left: 0.2rem;
        }
      }
    }
  }
  .noNetwork {
    text-align: center;
    margin: 0 auto;
    .noPhone {
      width: 3.8rem;
      height: 3rem;
      margin-top: 3rem;
    }
    p {
      font-size: 0.32rem;
      font-weight: 400;
      color: #959595;
    }
  }
}
</style>
